

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:p="http://primefaces.prime.com.tr/ui"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core">
<h:head>
  <title>Formulario</title>
  <link type="text/css" rel="stylesheet" href="Colores.css">
  </link>
</h:head>
  
    <h:body>
    
    <style> 
    body{
   
  background-image: url("http://i.imgur.com/JJ4W6nH.png");
     }
     
ul.topnav {
	list-style: none;
	padding: 0 20px;	
	margin: 0;
	float: right;
	width: 920px;
	background: #222;
	font-size: 1.2em;
	background: url(topnav_bg.gif) repeat-x;
}
ul.topnav li {
	float: left;
	margin: 0;	
	padding: 0 15px 0 0;
	position: relative; /*--Declare X and Y axis base for sub navigation--*/
}
ul.topnav li a{
	padding: 10px 5px;
	color: #ffff;
	display: block;
	text-decoration: none;
	float: left;
}
ul.topnav li a:hover{
	background: url(topnav_hover.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
	width: 17px;
	height: 35px;
	float: left;
	background: url(subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
	list-style: none;
	position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
	left: 0; top: 35px;
	background: #333;
	margin: 0; padding: 0;
	display: none;
	float: left;
	width: 170px;
	border: 1px solid #111;
}
ul.topnav li ul.subnav li{
	margin: 0; padding: 0;
	border-top: 1px solid #252525; /*--Create bevel effect--*/
	border-bottom: 1px solid #444; /*--Create bevel effect--*/
	clear: both;
	width: 170px;
}
html ul.topnav li ul.subnav li a {
	float: left;
	width: 145px;
	background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;
	padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
	background: #222 url(dropdown_linkbg.gif) no-repeat 10px center; 
}
     
     </style> 
  

           
     
     <br/>
     <br/>      
     <br/>
     <br/>
     <br/>
     <br/>
     <br/>
     <br/>      
     
     <br/>
     <br/>
	 
	<center>
<ul class="topnav">

	

    <li><a href="#">Home</a></li>
   
    <li>
        <a href="#">Ver Reservas</a>
        <ul class="subnav">
            <li><a href="#">Sub Nav Link</a></li>
            <li><a href="#">Sub Nav Link</a></li>
        </ul>
    </li>
    <li><a href="#">Cerrar Sesion</a></li>
    
</ul>
	</center>
	<br/>       
	<center>
      <br/>
     
      <h:form>       
	 
	 
	 <h2>Filtro</h2>
	 <br/>
	 <br/>
	
	 <font face="verdana" size="3" color="blue">
    
          <table border="0">
          
          
          <td>   <h:outputText value="Numero de Estudiantes:              " />  </td>
  <td> <select name="Estudiantes">    
       <option value="siete" selected="selected">7</option>
       <option value="doce">12</option>
       <option value="veinticuatro">24</option>
       <option value="trenta">30</option>
       <option value="trantaicinco">35</option>
       <option value="cuarenta">40</option>
      
   </select> </td>
<tr>
          <td>   <h:outputText value="Software:              " />  </td>
  <td> <select name="Soft">    
       <option value="Eclipse" selected="selected">Eclipse</option>
       <option value="NetBeans">NetBeans</option>
       <option value="dev c++">dev c++</option>
       <option value="Zinjai">Zinjai</option>
       <option value="Derive">Derive</option>
       <option value="Linux">Linux</option>
       <option value="Oracle">Oracle</option>
      
   </select> </td>
</tr>  
<tr>
                  
     <td>   <h:outputText value="fecha:" /></td>
     <td>   <p:calendar value="#{loginBean.fecha}" id="popupCal" >
          <h:outputText id="popupDate">
          <f:convertDateTime pattern="yyyy-mm-dd"/>
           </h:outputText>
           </p:calendar> </td>
</tr>              
      
<tr>
       <td>   <h:outputText value="Hora:              " />  </td>
       <td>   <h:inputText id="Hora" value="#{bean.hora}" required="true"/>  </td>
        
</tr>
<tr>
  
    </tr>     
	</table>	 
     
     </font>
                      
      </h:form>
     <br/>

    
     <input type="button" value="Continuar" />
    <br/>
    <br/>
    </center>
    
    
    
    </h:body>
  </html>